<template>
	<view>
		<view
			style="background-color: #CF152D; position: inherit; width: 100%; height: 300rpx; border-radius: 0rpx 0rpx 30rpx 30rpx;"
			@click="$refs.showLoginPop.open()">
			<image :src="data.avatar_url"
				style="border-radius: 500rpx; width: 120rpx; height: 120rpx; position: absolute; top: 35rpx; left: 35rpx; border: 1px solid #fff;">
			</image>
			<text style="position: absolute; top: 50rpx; left: 180rpx; color: #fff;">{{data.nickname}}</text>
			<text style="position: absolute; top: 110rpx; left: 180rpx; color: #fff; font-size: 24rpx;">ID: {{data.id}}</text>
		</view>
		<view
			style="box-shadow: 3px 3px 10px rgba(30, 40, 65, 0.08);position:absolute; background-color:#fff; width: 90%; height: 400rpx; left: 32rpx; top: 195rpx; padding: 20rpx 10rpx; font-size: 32rpx; border-radius: 20rpx;">
			<view style="padding: 10rpx 20rpx 0rpx 20rpx;">
				<text style="font-weight: bold">常用菜单</text>
				<view style="border-bottom: 1rpx solid #e4e4e4; padding-top: 20rpx; margin-bottom: 10rpx;"></view>
				<view style="text-align: center;">
					<navigator url="/pages/user/center/order">
						<view style="width: 25%; float: left; padding-top: 20rpx;">
							<view style="text-align: center;">
								<image src="/static/user/dingdan.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">我的订单</text>
						</view>
					</navigator>
					<navigator url="/pages/user/center/recom">
						<view style="width: 25%; float: left; padding-top: 20rpx;">
							<view style="text-align: center;">
								<image src="/static/user/tuijian.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">我的推荐</text>
						</view>
					</navigator>
					<navigator url="/pages/user/center/recomReward">
						<view style="width: 25%; float: left; padding-top: 20rpx;">
							<view style="text-align: center;">
								<image src="/static/user/jiangli.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">推荐奖励</text>
						</view>
					</navigator>
					<navigator url="/pages/user/center/activityPrize">
						<view style="width: 25%; float: left; padding-top: 20rpx;">
							<view style="text-align: center;">
								<image src="/static/user/lipin.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">我的礼品</text>
						</view>
					</navigator>
					
					<navigator url="/pages/user/center/platformPrize">
						<view style="width: 25%; float: left; padding-top: 30rpx;">
							<view style="text-align: center;">
								<image src="/static/user/manghe.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">我的盲盒</text>
						</view>
					</navigator>
					<navigator url="/pages/staff/index" v-if="data.role == 1">
						<view style="width: 25%; float: left; padding-top: 30rpx">
							<view style="text-align: center;">
								<image src="/static/user/dianpu.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">我是商家</text>
						</view>
					</navigator>
					<navigator url="/pages/clerk/index" v-if="data.role == 2">
						<view style="width: 25%; float: left; padding-top: 30rpx">
							<view style="text-align: center;">
								<image src="/static/user/dianyuan.png" style="width: 65rpx; height: 65rpx"></image>
							</view>
							<text style="line-height: 50rpx">我是店员</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 填写信息 -->
		<uv-popup ref="showLoginPop" :close-on-click-overlay="false" mode="bottom">
			<view class="popupBox">
				<view class="h2 bold">获取您的昵称、头像</view>
				<view class="h3">获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面</view>
				<view class="form">
					<view class="input u-flex">
						<view class="h2">头像</view>
						<view class="info">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" :src="avatarUrl"></image>
							</button>
						</view>
						<u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
					</view>
					<view class="input u-flex">
						<view class="h2">昵称</view>
						<view class="info">
							<input type="nickname" v-module="nickName" placeholder="请输入昵称" @blur="onBlur" />
						</view>
					</view>
				</view>
				<view class="submit" style="background: #1fba1a" @click="saveUserInfo">确定</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import * as api from '@/api/user'
	import config from '@/config'
	import storage from '@/utils/storage'
	export default {
		components: {},
		data() {
			return {
				data: [],
				avatarUrl: '',
				nickName: '',
			}
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			getInfo: function() {
				api.dashboard({
					activityId: storage.get('activityId')
				}).then(res => {
					this.data = res.data;
				});
			},
			onBlur(e) {
				this.nickName = e.detail.value
			},
			onChooseAvatar(e) {
				var that = this;
				uni.uploadFile({
					url: config.apiUrl + 'user/upload', // 替换成你的上传接口地址
					filePath: e.detail.avatarUrl, // 传入本地文件路径
					name: 'file', // 服务器接收的文件字段名
					success(uploadFileRes) {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data, 'uploadFileRes');
						that.avatarUrl = data.data.url
					},
					fail(err) {
						console.error('上传失败', err);
					}
				});
			},
			saveUserInfo() {
				if (!this.avatarUrl) {
					uni.showToast({
						title: '请上传头像',
						icon: 'error',
						duration: 3000
					});
				} else {
					if (!this.nickName) {
						uni.showToast({
							title: '请填写昵称',
							icon: 'error',
							duration: 3000
						});
					} else {
						api.saveUserInfo({
							"nickname": this.nickName,
							"avatar_url": this.avatarUrl
						}).then(res => {
							this.getInfo();
							this.$refs.showLoginPop.close()
						});
					}
					
				}
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.popupBox {
		width: 90%;
		padding: 50rpx 40rpx 30rpx;

		.h2 {
			color: #333;
			font-size: 32rpx;
		}

		.h3 {
			font-size: 26rpx;
			color: #999;
			line-height: 1.4;
			padding-top: 14rpx;
		}

		.bold {
			font-weight: bold;
		}

		.form {
			margin-top: 30rpx;
			border-top: 1px solid #EFEFEF;

			.input {
				padding: 24rpx 0;
				border-bottom: 1px solid #EFEFEF;

				.info {
					flex: 1;
					margin-left: 30rpx;

					.avatar-wrapper {
						padding: 0;
						width: 70rpx;
						height: 70rpx;
						border-radius: 10rpx;

						.avatar {
							width: 70rpx;
							height: 70rpx;
							border-radius: 10rpx;
						}
					}

					input {
						background: transparent;
						width: 100%;
						height: 70rpx;
						color: #333;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	.submit {
		margin-top: 30rpx;
		width: 100%;
		height: 92rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 92rpx;
		color: #fff;
		font-size: 32rpx;
		background: #E83F3C;
	}
</style>